<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="账号">
          <el-input v-model="form.name" disabled style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="form.password" type="password" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="form.password_confirm" type="password" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getUserInfo } from '@/api/login'
import { updateAccount } from '@/api/setting'
export default {
  name: 'AccountInfo',
  data() {
    return {
      form: {
        id: undefined,
        name: undefined,
        email: undefined,
        password: undefined,
        password_confirm: undefined
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      getUserInfo().then(res => {
        if (res.status === 200) {
          this.form.id = res.data.id
          this.form.name = res.data.name
          this.form.email = res.data.email
        }
      })
    },
    onSubmit() {
      const data = this.form
      if (data.email === '') {
        this.$message.error('邮箱不能为空')
        return
      }
      if (data.password !== '') {
        if (data.password !== data.password_confirm) {
          this.$message.error('密码不一致')
          return
        }
      }
      updateAccount(data).then(res => {
        if (res.status === 200) {
          this.$message.success('保存成功')
          this.getInfo()
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
